<template>

  <view>
    <view class="fixed-box">
      <view style="background: linear-gradient(180deg, #FFDFE8 0%, rgba(255, 204, 218, 0) 70%);line-height: 40px;">
        <u-gap height="100"/>
        <view class="tn-padding-left tn-text-left tn-text-xxl tn-text-bold">{{appName}}</view>
        <view class="tn-flex tn-flex-row-between tn-flex-col-center" style="margin: 0px 16px">
          <tn-input v-model="searchTvName" placeholder="请输入剧名" :border="false" border-color="#D8D8D8" @confirm="search" :maxLength="50" style="width: 100%;background: white;border-radius: 30px;padding: 0 10px"/>
          <text class="tn-icon-search-menu tn-text-xxl tn-margin-left-xs" style="color: #e93d6e" @click="search"/>
        </view>
        <view class="dm-padding-left-right">
          <tn-scroll-list :indicator="false">
            <block v-for="(item, index) in categoryList" :key="index">
              <view class="tn-margin-right-xs" style="height: 40px;">
                <tn-tag v-if="cateIdx===index" background-color="#FF3D71" fontColor="#FFF" shape="circle" padding="30rpx">{{item.name}}</tn-tag>
                <tn-tag v-else background-color="#FCFCFC" fontColor="#000" shape="circle" padding="30rpx" @click="changeCate(index)">{{item.name}}</tn-tag>
              </view>
            </block>
          </tn-scroll-list>
        </view>
      </view>
    </view>

    <u-gap height="360"/>

    <view v-if="cateIdx===0">
      <!-- 精选滚动栏   -->
      <view class="tn-margin-top">
        <swiper circular :indicator-dots="false"  :autoplay="true" easing-function="easeInOutCubic">
          <swiper-item v-for="(item,index) in swiperList">
            <view class="tn-padding-left tn-padding-right" >
              <view class="tn-flex tn-flex-direction-row">
                <view class="tn-flex tn-margin-right">
                  <image class="tv-image" :src="item.image|handlePic"/>
                </view>
                <view class="tn-flex tn-flex-direction-column" style="width: 80%">
                  <view class="tn-flex dm-margin-top-bottom-xs tn-flex-direction-row tn-flex-row-between">
                    <view class="tn-text-bold tn-text-lg">{{ item.tv_name }}</view>
                    <view class="tn-text-bold tn-text-lg dm-main-text-color" v-if="item.score">{{ item.score }}分</view>
                  </view>
                  <view class="tn-text-sm dm-margin-top-bottom-xs tn-color-gray--dark tn-text-ellipsis-2">{{item.desc }}</view>
                  <view>
                    <tn-button backgroundColor="#FF3D71" fontColor="tn-color-white" shape="round" @click="toVideoDetail(item)">
                      <text class="tn-icon-video-fill"/>立即观看
                    </tn-button>
                  </view>
                </view>
              </view>
            </view>
          </swiper-item>
        </swiper>
      </view>
      <!-- 精选剧列表   -->
      <view class="tn-bg-white" style="min-height: 600px" >
        <grid-video-list :video-list="videoList"/>
      </view>
    </view>

    <!-- 非精选剧列表 -->
    <view v-else style="min-height: 800px">
      <column-video-list :video-list="videoList" @followSuccess="followSuccess"/>
    </view>
    <!-- 隐私协议   -->
    <privacy-policy/>

  </view>

</template>

<script>
import common_mixin from '@/libs/mixin/common_mixin.js'
import PrivacyPolicy from "../../components/privacy-policy/privacy-policy.vue";
import GridVideoList from "../../components/grid-video-list/grid-video-list.vue";
import ColumnVideoList from "../../components/column-video-list/column-video-list.vue";
import Config from "../../utils/config";
import UGap from "../../uni_modules/uview-ui/components/u-gap/u-gap.vue";
import TnInput from "../../uni_modules/tuniao-ui/components/tn-input/tn-input.vue";

export default {
  components: {TnInput, UGap, ColumnVideoList, GridVideoList, PrivacyPolicy},
  mixins: [common_mixin],
  name: "index",
  data() {
    return {
      appName:Config.appName,
      categoryList:[],
      cateIdx:0,
      currentCategory:{id:'',name:'全部'},

      swiperList:[],

      videoList:[],
      page:1,

      searchTvName:''
    }
  },
  onLoad(options) {
    this.handleOptions(options);
    this.getIndexSwiper();
    this.getCategoryList();
    this.getTvList();
  },
  onShow(){

  },
  methods:{
    handleOptions(params) {
      if(!params.path) {
        return;
      }
      if(params.path=='player') {
        let url= '/pages_sub/player/player?tvId='+params.tv_id+"&episode="+params.series;
        this.tn(url);
      }
    },
    search(){
      this.tn('/pages_sub/search/search?searchTvName='+this.searchTvName);
    },
    followSuccess(index) {
      this.videoList[index].is_follow=true
    },
	//改变分类
    changeCate(index) {
      this.cateIdx=index;
      this.currentCategory=index===0?'':this.categoryList[index]
      this.page=1;
      this.videoList=[];
      this.getTvList()
    },
    async getTvList() {
      let params = {
        page:this.page,
        cateId: this.currentCategory.id,
		limit:12
      }
      let res = await this.$api.getTvList(params)
      this.videoList = res.data
    },
    async getIndexSwiper(){
      let res = await this.$api.getIndexSwiper()
      this.swiperList = res.swiperInfo
    },
    async getCategoryList(){
      let res = await this.$api.getCategoryList()
      this.categoryList = res.categories
      this.categoryList.unshift({id:'',name:'全部'})
    },
  },
  async onReachBottom() {
    console.log('页面触底了');
	let params = {
	  page:this.page+1,
	  cateId: this.currentCategory.id,
	  limit:12
	}
	let res = await this.$api.getTvList(params)
	if(res.data.length>0){
		this.videoList = this.videoList.concat(res.data);
		this.page++;
	}
  },
}
</script>

<style scoped lang="scss">
.fixed-box{
  width: 100%;
  position: fixed;
  z-index:99;
  background: white;
}
</style>
